<template>
  <div id="app">
    <!-- 头部调用组件 -->
    <header>
      <Sort />
    </header>
    <!-- 内容区调用组件 -->
    <section>
      <banner />
      <brand/>
      <seckill/>
      <Merchandise/>
    </section>
    <!-- 尾部调用组件 -->
    <footer>
      <Nav />
    </footer>

  </div>
</template>

<script>
// 引入组件
import Sort from './header/Sort.vue';
import Banner from './seaction/Banner.vue';
import Nav from './footer/Nav.vue';
import Brand from './seaction/Brand.vue';
import Seckill from './seaction/Seckill.vue';
import Merchandise from './seaction/Merchandise.vue';
export default {
  name: 'Header',
  // 注册组件
  components: {
    Sort,
    Banner,
    Nav,
    Brand,
    Seckill,
    Merchandise,
  }
}
</script>

<style lang="less">

#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  header {
    height: 6vh;
    background-color: #E43130;
  }

  section {
    flex: 1;
    overflow: auto;
    background-color: #F6F6F6;
  }

  footer {
    height: 7vh;
  }
}
</style>
